<template>
    <div class="wrapper">
      <myHeader :obj="myObj" @events="events"></myHeader>
      <main>
        <div class="title">约见题目</div>
        <div class="textss_0315"><label class="label">标题</label><input placeholder="预设内容" 
        type="text" 
        maxlength="15" 
        v-model="mytitle"></div>
        <div class="title">想知道些什么</div>
        <div class="textarea"><textarea placeholder="内容描述,250字内" v-model="Describe" maxlength="250"></textarea></div>
        <div class="title">图片添加</div>
        <div class="imgs">
          <ul>
            <li v-show="this.picimg"><img :src="this.picimg" /></li>
          </ul>
          <div id="fileid">
            <span class="spanItem2_0314 addImg"></span>
            <input type="file" 
              accept="image/gif,image/jpeg,image/jpg,image/png" 
              @change="changeimg($event)" 
              multiple="multiple" />
          </div>
        </div>
        <div class="title colorDeeps_0315">希望哪个领域的行家为你解答？<i>*</i></div>
        <div class="labels">
          <myLabel :closeIcon="true" v-for="(tag,index) in tags" @removetag="removetag(index)" >{{tag}}</myLabel>
          <span class="addLabel" @click="addLabel()" v-show="tagshow">添加标签+</span>
        </div>
        <div class="textss_0315"><label class="label">预约金额</label><input placeholder="金额不能为零且小于一万" type="number" v-model="Money"></div>
        <div class="sendWrap">
            <myButton class="send" @sendDate="sendDate">发布</myButton>
        </div>
      </main>
      <div id="upProgress" ref="upProgress">
      <div class="pro-in">
        <mt-spinner type="fading-circle" :size="80" color="#454545"></mt-spinner>
        <span class="clarify">上传中... <i id="proPercent">0%</i></span>
      </div>
    </div>
    </div>
</template>
<script>
import myHeader from './base/myHeader';
import myButton from './base/myButton';
import myLabel from './base/myLabel';
import { MessageBox,Indicator,Toast } from 'mint-ui';
import { axiosPost} from '../assets/api';
import hgjSkip from '../assets/js/hgjSkip';
import API from '../assets/js/asktoses';
import { fetch } from '../assets/api';
import Chat from "../assets/js/chat";
export default {
  data () {
    return {
      myObj: {
        type: 3,
        text: "求约",
      },
      mytitle:"",//标题
      Describe:"",//描述
      piclist:[],
      tags:[],//标签
      tagshow:true,//是否显示添加标签
      Money:"",
      picimg:false,
      thumpicimg:"",
      picFile:"",
      loginData:null,
    }
  },
  created(){
    hgjSkip.skip().then(res =>{
      this.loginData = res;
    })
  },
  methods: {
    events(i){
      if(i == 2){
         history.back();
      }
    },
    //添加图片
    changeimg (e) {
      let file = e.target.files[0];
      let WinUrl = window.URL || window.webkitURL;
      this.picimg = WinUrl.createObjectURL(file);
      //控制上传进度
      let upProgress = this.$refs.upProgress;
      upProgress.style.display = 'block';
      document.querySelector('#proPercent').innerHTML = '0%';
      Chat.changePicFile(e).then(resp=>{
        this.picimg = resp[1];
        this.thumpicimg = resp[0];
        upProgress.style.display = 'none';
        //console.log('真实回来的文件路径',resp[1]);
      }).catch(err=>{
        upProgress.style.display = 'none';
        console.log('err',err);
      });
    },
    //移除标签
    removetag (num){
      this.tags.splice(num,1);
      if (this.tags.length > 2){
          this.tagshow = false;
        } else {
          this.tagshow = true;
        }
    },
    //发布求约
    async sendDate(){
      if(this.mytitle == ""){
        Toast("请填写标题")
      }else if(this.Describe == ""){
        Toast("您还没有写描述")
      }else if(this.picimg == false){
        Toast("请上传一张图片")
      }else if(this.Money == "" || this.Money > 10000){
        Toast("金额不能为空且小于一万")
      }else if(this.tags.length < 1){
        Toast("标签能有利于行家对您的帮助")
      }else {
        const res = await fetch(API.getReleaseAskToSes,{
          ...this.loginData[1],
          Money: this.Money,
          Tallys:this.tags.join(","),
          PicUrl:this.thumpicimg,
          ThumPicUrl:this.picimg,
          Describe:this.Describe,
          Title:this.mytitle,
        });
        console.log("发布成功",res);
        this.back();
      }
    },
    back() {
      history.back();
    },
    addLabel(){
      MessageBox.prompt("", {
        message: "添加标签",
        title: "",
        inputPlaceholder: "添加标签(只截取前5字)",
        closeOnClickModal: false // 点击遮罩层不关闭
      }).then(({ value, action }) => {
        console.log(value);
        String.prototype.trim=function()
        {
            return this.replace(/(\s*)|(^\d?)/g, '');
        }
        try{
          if(value.trim() && value){
            this.tags.push(value.substring(0,5))
            if (this.tags.length > 2){
              this.tagshow = false;
            }
          } else {
            Toast("标签不能为空")
          }
        } catch (err) {

        }
        
          
      },() => {
        console.log("取消");
      });
    }
  },
  components: {
    myHeader,
    myButton,
    myLabel
  }
}

</script>
<style lang="less">
  .wrapper {
    width: 3.75rem;
    #upProgress{
      display: none;
      width:100%;
      height:100%;
      position: absolute;
      top:0;
      left:0;
      z-index:9999;
      background: rgba(255,255,255,.9);
      .pro-in{
        height:100%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        display: flex;
        align-items: center;
      }
      .clarify{
        display: block;
        color:#454545;
        font-size: .14rem;
        padding-top:.16rem;
        i{
          font-size: .18rem;
          font-style: normal;
        }
      }
    }
    main {
      width: 100%;
      height: 100%;
      padding-top: .44rem;
      position: absolute;
      top: 0;
      left: 0;
      overflow-y: auto;
      box-sizing: border-box;
      .sendWrap {
        padding: .56rem 0 .21rem;
      }
      .title {
        height: .44rem;
        line-height: .44rem;
        color: #888;
        font-size: .14rem;
        padding-left: .16rem;
      }
      .colorDeeps_0315 {
        color: #353535;
        font-weight: 500;
        i{
          display: inline-block;
          font-size: 0.2rem;
          color: red;
          font-style: normal;
        }
      }
      .textss_0315 {
        height: .44rem;
        padding: 0 .15rem;
        background: white;
        display: flex;
        align-items: center;
        .label {
          width: .9rem;
          font-size: .17rem;
          color: #000;
          font-weight: bold;
        }
        input {
          display: flex;
          flex: 1;
          color: #B2B2B2;
          font-size: .17rem;
          border: none;
        }
      }
      .textarea {
        width: 100%;
        padding: .11rem .15rem;
        background: white;
        box-sizing: border-box;
        textarea{
          width: 100%;
          min-height: .53rem;
          font-size: .17rem;
          color: #B2B2B2;
          font-family: "Microsoft YaHei";
        }
      }
      .imgs {
        padding: .15rem;
        background: white;
        overflow: hidden;
        #fileid{
            display: block;
            float: left;
            width: .57rem;
            height: .57rem;
            margin: 0 0 .13rem 0;
            position: relative;
          .spanItem2_0314 {
            display: inline-block;
            width: 100%;
            height: 100%;
          }
          input[type="file"]{
            appearance: none;
            -webkit-appearance: none;
            opacity: 0;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
        
        li{
          display: block;
          float: left;
          width: .57rem;
          height: .57rem;
          background: #ccc;
          margin: 0 .13rem .13rem 0;
          overflow: hidden;
            &:nth-of-type(5n){
              margin: 0 0 .13rem 0;
            }
            img{
              min-width: 100%;
              max-height: 100%;
            }
          }
        .addImg{
          background: url("../assets/img/expert/icon_ba@3x.png");
          background-size: cover;
          background-repeat: no-repeat;
        }
      }
      .labels {
        overflow: hidden;
        padding: .07rem .2rem 0;
        span {
          display: block;
          height: .3rem;
          line-height: .3rem;
          float: left;
          text-align: center;
          padding: 0 .1rem;
          margin: 0 .14rem .14rem 0;
          border: .04rem;
          border-radius: .04rem;
          font-size: .14rem;
          &.addLabel{
            background: #828282;
            color: white;
          }
        }
        
      }

    }
    
  }
</style>
<style>
  .mint-msgbox .mint-msgbox-input .mint-msgbox-errormsg {
    display: none;

  }
  .mint-msgbox-content .mint-msgbox-message {
    color: #000;
    font-weight: bold;
    font-size: .18rem;
  }
  .mint-msgbox .mint-msgbox-input input {
    border: .01rem solid #ccc;
    box-sizing: border-box;
    height: .35rem;
    line-height: 0.35rem;
  }
  .mint-msgbox-cancel{
    font-size: .16rem;
  }
  .mint-msgbox-confirm{
    font-size: .16rem;
  }
</style>